$border-color: $border-default
$bg-color: $bg-body
$zindex-cascade: 1000
$line-height-base: 1rem

.fui-cascade
  position: relative
  min-width: 5rem
  margin: 2px 0px
  user-select: text
  white-space: normal
  font-size: $font-md
  line-height: $line-height-base
  background-color: $bg-color
  background-clip: padding-box
  border: 1px solid $input-border-color
  border-radius: 2px
  z-index: $zindex-cascade

  &-trigger
    cursor: pointer

  &-item
    position: relative
    display: block
    padding: 8px 24px 8px 16px
    transition: background-color .2s
    font-size: $font-md
    white-space: nowrap
    transition: none
    cursor: pointer

    &:hover
      background: $bg-hover

    &:first-child
      border-top-left-radius: .25rem
      border-top-right-radius: .25rem

    &:last-child
      border-bottom-left-radius: .25rem
      border-bottom-right-radius: .25rem

    &-trigger

      &:after
        width: 0
        height: 0
        border-style: solid
        border-width: 5px 0 5px 5px
        border-color: transparent transparent transparent $icon-default
        content: ''
        display: inline-block
        position: absolute
        top: 50%
        right: 8px
        transform: translateY(-50%)

    &.fui-cascade-open
      background: $bg-hover

  &-subCascade
    margin: -1px 0

  &-divider
    width: 100%
    border-top: 1px solid $border-color
    z-index: -1

  &-backdrop
    z-index: 999 !important
